<template>
  <me-table :data="state.list" :height="300" :pagination="pagination" @current-change="pageSizeChange" :customHandle="{
    audit: {
      label: '审核',
      type: 'primary',
      callback: auditHandle
    }
  }">
    <el-table-column prop="user" label="用户">
      <template #default="{ row }">
        <span>{{ row.user.nickname }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="price" label="图片" width="300">
      <template #default="{ row }">
        <div>
          <el-image class="img" v-for="item in row.pictures" :key="item.url" :src="item.url"></el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" />
    <el-table-column prop="createTime" label="创建时间" />
  </me-table>
  <Dialog v-model="dialogVisible" :data="rowData" :handle="{
    cancel: {
      label: '审核不通过',
      callback: cancel
    },
    submit: {
      label: '审核通过',
      callback: submit
    }
  }">
    <el-card class="box-card">
      <template #header>
        <User :data="rowData"></User>
      </template>
      <div class="box">
        <div class="content" style="margin-bottom: 10px;">{{ rowData.content }}</div>
        <div class="img">
          <el-image style="width: 100px; height: 100px; margin-right: 10px;" :src="item.url"
            v-for="(item, i) in rowData.pictures" :key="item.url" :preview-src-list="rowData.pictures.map((item:any) => (item.url))" :initial-index="i" />
        </div>
      </div>
    </el-card>
  </Dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { getAuditList, pass, noPass } from '@/axios/api/news'

const state = reactive({
  list: []
})

const pagination = reactive({
  total: 0,
  index: 1,
  size: 20
})

const getList = () => {
  getAuditList(pagination.index, pagination.size).then((res: any) => {
    state.list = res.records
    pagination.total = res.total
  })
}

onMounted(() => {
  getList()
})

const pageSizeChange = (index: number) => {
  pagination.index = index
  getList()
}

const rowData = ref<any>({})
const dialogVisible = ref(false)
const auditHandle = (row: any) => {
  dialogVisible.value = true
  rowData.value = row
  console.log(row)
}

const cancel = () => {
  noPass(rowData.value._id)
  dialogVisible.value = false
  getList()
}

const submit = () => {
  pass(rowData.value._id)
  dialogVisible.value = false
  getList()
}

</script>

<style lang="scss" scoped>
</style>